Code Breakers | No-code solutions

💻 Как разработать таск-трекер на Bubble: подготовка

Один из самых простых IT-продуктов и первый, который мы зачастую предлагаем разработать на Bubble, — таск-трекер для отслеживания задач и проектов внутри команды. По итогам у вас получится собственный таск-трекер, который можно положить в портфолио или использовать как инструмент для работы.

И сегодня поговорим о первом и очень важном этапе разработки IT-продукта — подготовке.

Первый этап. Подготовка 
Наш план — разработать таск-трекер. Начнём с проработки структуры приложения и соберём необходимые данные. 

У проекта 9 экранов ⬇️
Основной: посадочная страница.
Системные: экран регистрации, экран для входа в аккаунт, сброс пароля, страница 404.
Шапка: реиспользуемый хедер.
Содержательные: дашборд со всеми проектами, страница проекта, страница профиля.

Удобно отрисовать эту схему в Miro или FigJam. Со схемой проекта ничего не потеряется и не забудется.

Для создания красивого проекта нужны картинки: аватарки юзеров для примера и демонстрация интерфейса проекта для посадочной страницы. Эти материалы берите со страницы этого ролика Bubble. 

Теперь создаём аккаунт в Bubble, если его ещё нет, и создаём новое приложение.

Дальше есть два пути: сделать заготовку под каждый экран самостоятельно или воспользоваться готовым темплейтом от Bubble. Готовый шаблон находится здесь.

Если хотите делать с нуля, то на этом этапе просто заготовьте пустые экраны под каждый из расписанных в структуре — через верхнюю левую панель по клику на Add a new page сделайте экраны и озаглавьте их понятным способом.

Рекомендуем начать с готового темплейта. Посмотрите структуру, настройки и лучше поймёте детали, а потом можно попробовать собрать всё с нуля.

➖➖➖➖➖➖➖➖➖➖➖➖

Хотите быстро научиться разрабатывать IT-продукты с помощь Bubble и зарабатывать на этом? Приходите на наш курс «Веб-разработчик без кода». У нас осталось 3 свободных места на ближайший поток ❤️

💻 Хочу освоить Bubble: codebreakers.tech/bubble

www.tg-me.com/no/Code Breakers | No code solutions/com.code_breakers/667

2.0K viewsedited  Nov 27, 2023 at 07:00

💻 Как разработать таск-трекер на Bubble: подготовка

Один из самых простых IT-продуктов и первый, который мы зачастую предлагаем разработать на Bubble, — таск-трекер для отслеживания задач и проектов внутри команды. По итогам у вас получится собственный таск-трекер, который можно положить в портфолио или использовать как инструмент для работы.

И сегодня поговорим о первом и очень важном этапе разработки IT-продукта — подготовке.

Первый этап. Подготовка 
Наш план — разработать таск-трекер. Начнём с проработки структуры приложения и соберём необходимые данные. 

У проекта 9 экранов ⬇️
Основной: посадочная страница.
Системные: экран регистрации, экран для входа в аккаунт, сброс пароля, страница 404.
Шапка: реиспользуемый хедер.
Содержательные: дашборд со всеми проектами, страница проекта, страница профиля.

Удобно отрисовать эту схему в Miro или FigJam. Со схемой проекта ничего не потеряется и не забудется.

Для создания красивого проекта нужны картинки: аватарки юзеров для примера и демонстрация интерфейса проекта для посадочной страницы. Эти материалы берите со страницы этого ролика Bubble. 

Теперь создаём аккаунт в Bubble, если его ещё нет, и создаём новое приложение.

Дальше есть два пути: сделать заготовку под каждый экран самостоятельно или воспользоваться готовым темплейтом от Bubble. Готовый шаблон находится здесь.

Если хотите делать с нуля, то на этом этапе просто заготовьте пустые экраны под каждый из расписанных в структуре — через верхнюю левую панель по клику на Add a new page сделайте экраны и озаглавьте их понятным способом.

Рекомендуем начать с готового темплейта. Посмотрите структуру, настройки и лучше поймёте детали, а потом можно попробовать собрать всё с нуля.

➖➖➖➖➖➖➖➖➖➖➖➖

Хотите быстро научиться разрабатывать IT-продукты с помощь Bubble и зарабатывать на этом? Приходите на наш курс «Веб-разработчик без кода». У нас осталось 3 свободных места на ближайший поток ❤️

💻 Хочу освоить Bubble: codebreakers.tech/bubble

BY Code Breakers | No-code solutions